<template>
  <!--<el-dialog
    :title="title"
    :visible.sync="Visible"
    size="tiny"
  >-->

    <el-form :model="ruleForm"  ref="ruleForm" label-position="right"  label-width="100px" class="small-space" style="margin-top: 25px">
      <h1 style="padding-left: 50px;margin-bottom: 50px" v-if="!this.$route.query.id">
        添加课室
      </h1>
      <h1 style="padding-left: 50px;margin-bottom: 50px" v-if="this.$route.query.id">
        编辑课室
      </h1>

      <el-row v-loading.body="listLoading">
        <el-col :span="10" :offset="2">

          <el-form-item label="课室名称" prop="name" style="width: 400px">
            <el-input v-model="ruleForm.name"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.name">{{errors.name ? errors.name[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="设备" prop="attachment" style="width: 400px">
            <el-select
              @visible-change="getAttachment"
              v-model="ruleForm.attachment"
              multiple
              filterable
              allow-create
              placeholder="请选择设备">
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.attachment">{{errors.attachment ? errors.attachment[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="课室介绍" prop="introduction" style="width: 400px">
            <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.introduction">{{errors.introduction ? errors.introduction[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="备注" prop="note" style="width: 400px">
            <el-input type="textarea" v-model="ruleForm.note"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.note">{{errors.note ? errors.note[0] : ''}}</div>
            </transition>
          </el-form-item>
        </el-col>

        <el-col :span="8" >
          <el-form-item label="座位总数" prop="seat_num" style="width: 400px">
            <el-input  v-model="ruleForm.seat_num" disabled></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.seat_num">{{errors.seat_num ? errors.seat_num[0] : ''}}</div>
            </transition>
          </el-form-item>
            <el-form-item label="座位设定">
              <el-col :span="12">
                <el-input-number v-model="ruleForm.seat_row"  :min="1" :max="10" ></el-input-number>
              </el-col>
              <el-col :span="12">
                <el-input-number v-model="ruleForm.seat_col"  :min="1" :max="10" ></el-input-number>
              </el-col>
            </el-form-item>
            <seat-selection
              ref="seats"
              @clickSeat="clickSeat"
              @changeSeats="changeSeats"
              :data="ruleForm.seat_info"
              :col="ruleForm.seat_col"
              :row="ruleForm.seat_row">
            </seat-selection>
        </el-col>
      </el-row>


         <!-- <el-form-item label="是否禁用" prop="is_disable" >
            <el-switch
              v-model="ruleForm.is_disable"
              on-text="禁用"
              off-text="启用">
            </el-switch>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.is_disable">{{errors.is_disable ? errors.is_disable[0] : ''}}</div>
            </transition>
          </el-form-item>-->

      <el-row :gutter="20" style="margin-top: 100px">
        <el-col :span="12" :offset="7">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button  type="primary" @click="returnPage">返回上一页</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  <!--</el-dialog>-->
</template>

<script>
import _ from 'lodash'
import { Show, Update, Create, extraInfo } from '@/api/classroom'
import SeatSelection from '@/components/SeatSelection'

export default {
  components: {
    SeatSelection
  },
  props: {
    title: {
      type: String
    },
    editId: {}
  },
  data() {
    return {
      errors: {},
      listLoading: false,
      loadTable: false,
      ruleForm: {
        name: null,
        introduction: null,
        seat_num: null,
        seat_row: 4,
        seat_col: 4,
        seat_info: [],
        note: null,
        attachment: [],
        is_disable: null
      },
      options5: []
    }
  },
  computed: {
    // 要监听对象里面一个具体的属性
    seat_num() {
      return this.ruleForm.seat_num
    },
    seat_row() {
      return this.ruleForm.seat_row
    },
    seat_col() {
      return this.ruleForm.seat_col
    },
    seat_info() {
      return this.ruleForm.seat_info
    }
  },
  watch: {
    seat_info(newSeats) {
      this.computeSeatNum(newSeats)
    }
  },
  methods: {
    computeSeatNum(seats) {
      const seat_disabled_num = _.chain(seats).map('columns').flattenDeep().countBy('disabled').value()
      this.ruleForm.seat_num = seat_disabled_num.false
    },
    changeSeats(seats) {
      // sync seats
      this.ruleForm.seat_info = seats
    },
    clickSeat(seat, seats) {
      // 切换禁止状态
      this.$refs.seats.toggleSeatDisable(seat)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })

        .catch(_ => {})
    },
    submitForm(formName) {
      console.log(this.ruleForm.seat_info, '提交的座位信息')

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.errors = {}
          this.listLoading = true
          if (this.$route.query.id) {
            Update(this.$route.query.id, _.pick(this.ruleForm, ['name', 'introduction', 'seat_num', 'seat_row', 'seat_col', 'seat_info', 'note', 'is_disable', 'attachment'])).then((res) => {
              if (res.data.is_disable === 0) {
                this.ruleForm.is_disable = false
              } else {
                this.ruleForm.is_disable = true
              }
              console.log(this.ruleForm.is_disable)
              this.$message({ message: '保存成功', type: 'success' })
              this.$router.push({ path: '/classroom' })
              this.close()
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          } else {
            console.log(this.ruleForm.seat_row, '行的信息')
            console.log(this.ruleForm.seat_col, '列的信息')
            Create(_.pick(this.ruleForm, ['name', 'introduction', 'seat_num', 'seat_row', 'seat_col', 'seat_info', 'note', 'is_disable', 'attachment'])).then((res) => {
              if (res.data.is_disable === 0) {
                this.ruleForm.is_disable = false
              } else {
                this.ruleForm.is_disable = true
              }
              console.log(this.ruleForm.is_disable)
              this.$message({ message: '保存成功', type: 'success' })
              this.$router.push({ path: '/classroom' })
              this.close()
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          }

          //            this.resetForm('ruleForm')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.listLoading = false
      this.resetForm('ruleForm') // 清空表单
      this.loadTable = true
      this.Visible = false // 关闭对话框
    },
    getAttachment(w) {
      if (w) this.getTags()
      console.log('设备', this.ruleForm.attachment)
    },
    // 获取设备信息
    getTags() {
      extraInfo().then((res) => {
        this.options5 = res.attachments
      })
    },
    returnPage() {
      this.$router.push({ path: '/classroom' })
    }
  },
  mounted() {
    this.getTags()
    if (this.$route.query.id) {
      this.listLoading = true
      Show(this.$route.query.id).then((res) => {
        this.ruleForm = res.data
        this.ruleForm.seat_num = res.data.seat_num
        this.ruleForm.seat_info = res.data.seat_info
        console.log('编辑的座位信息', this.ruleForm.seat_info)
        console.log('编辑一开始的总数', this.ruleForm.seat_num)
        console.log('debuf-->> staff', res)
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  $dark_gray:#889aa4;
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
  }
  .classtitle{
    font-size: x-large;
    font-weight: 500;
  }
</style>
